<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/home' }"
        ><span class="el-icon-s-home"></span>首页</el-breadcrumb-item
      >
      <a href="/#/nav">免疫计划疫苗采购计划</a>
    </el-breadcrumb>
    <!-- 查询框 -->
    <el-card class="box-card1">
      <div slot="header" class="clearfix">
        <span><span class="el-icon-search"></span> 卡片名称</span>
      </div>
      <div class="Form">
        <!-- 查询表单 -->
        <el-form ref="form" :model="inquiryForm" label-width="80px">
          <!--计划年度  -->
          <el-col :span="8"
            ><el-form-item label="计划年度" size="mini">
              <el-select
                placeholder="单行输入"
                filterable
                v-model="inquiryForm.value1"
              >
                <el-option
                  v-for="item in inquiryForm.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <!--  所属机构-->
          <el-col :span="8">
            <el-form-item label="所属机构" size="mini">
              <el-select
                placeholder="请选择活动区域"
                v-model="inquiryForm.value2"
              >
                <el-option
                  v-for="item in inquiryForm.options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 报告机构 -->
          <el-col :span="8">
            <el-form-item label="报告机构" size="mini">
              <el-input placeholder="请输入报告机构"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
        <el-button size="mini" type="success">查询</el-button>
      </div>
      <!-- 区域划分 -->
    </el-card>
    <!-- 表格卡片 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span><span class="el-icon-tickets"></span> 区划列表</span>
      </div>
      <div class="formBox">
        <!-- 按键集 -->
        <div class="btnDom">
          <el-button size="mini">复制上期</el-button>
          <el-button size="mini">新增</el-button>
          <el-button size="mini">汇总校对</el-button>
          <el-button size="mini">查询</el-button>
          <el-button size="mini">重置</el-button>
        </div>
        <!-- 表单 -->
        <el-table
          :data="tableData"
          height="250"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#F5FBFB' }"
          size="mini"
        >
          <el-table-column
            type="index"
            label="序号"
            width="50"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="date"
            label="报告年度"
            header-align="center"
            align="center"
            :span="4"
          >
          </el-table-column>
          <el-table-column
            prop="organization"
            label="所属机构"
            header-align="center"
            align="center"
            :span="4"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="报告人"
            header-align="center"
            align="center"
            :span="4"
          >
          </el-table-column>
          <el-table-column
            prop="ordate"
            label="报告时间"
            header-align="center"
            align="center"
            :span="4"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            header-align="center"
            align="center"
            :span="4"
          >
            <el-button type="text">编辑</el-button>
            <el-button type="text">详情</el-button>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryinfo.pagenum"
            :page-sizes="[1, 3, 5, 10]"
            :page-size="queryinfo.pagesizes"
            layout="sizes, prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 查询表单
      inquiryForm: {
        value1: "",
        value2: "选项1",
        options: [
          {
            value: "选项1",
            label: "2021",
          },
          {
            value: "选项2",
            label: "2020",
          },
          {
            value: "选项3",
            label: "2019",
          },
          {
            value: "选项4",
            label: "2018",
          },
          {
            value: "选项5",
            label: "2017",
          },
        ],
        options2: [
          {
            value: "选项1",
            label: "全部",
          },
          {
            value: "选项2",
            label: "大众巷社区卫生服务中心1",
          },
          {
            value: "选项3",
            label: "大众巷社区卫生服务中心2",
          },
          {
            value: "选项4",
            label: "大众巷社区卫生服务中心3",
          },
          {
            value: "选项5",
            label: "大众巷社区卫生服务中心4",
          },
        ],
      },
      // 表格数据
      tableData: [
        {
          date: "2021",
          name: "王小虎",
          organization: "大众巷社区卫生服务中心",
          ordate: "2019-07-04 10:00:00",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2021",
          name: "王小虎",
          organization: "大众巷社区卫生服务中心",
          ordate: "2019-07-04 10:00:00",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2021",
          name: "王小虎",
          organization: "大众巷社区卫生服务中心",
          ordate: "2019-07-04 10:00:00",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2021",
          name: "王小虎",
          organization: "大众巷社区卫生服务中心",
          ordate: "2019-07-04 10:00:00",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2021",
          name: "王小虎",
          organization: "大众巷社区卫生服务中心",
          ordate: "2019-07-04 10:00:00",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2021",
          name: "王小虎",
          organization: "大众巷社区卫生服务中心",
          ordate: "2019-07-04 10:00:00",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2021",
          name: "王小虎",
          organization: "大众巷社区卫生服务中心",
          ordate: "2019-07-04 10:00:00",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2021",
          name: "王小虎",
          organization: "大众巷社区卫生服务中心",
          ordate: "2019-07-04 10:00:00",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2021",
          name: "王小虎",
          organization: "大众巷社区卫生服务中心",
          ordate: "2019-07-04 10:00:00",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      //分页
      queryinfo: {
        pagenum: 2,
        pagesizes: 3,
      },
      total: 9,
    };
  },
  mounted() {},
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      console.log(this.total);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-breadcrumb {
  margin-bottom: 10px;
  span {
    color: #2dbcbe;
  }
  a {
    color: #2dbcbe;
  }
}
.box-card1 {
  margin-bottom: 10px;
}
.el-card__header,
.el-card__body {
  padding: 10px !important;
}
.el-card {
  span[class^="el-icon"] {
    color: #2dbcbe;
  }
}
.Form {
  text-align: center;
}
.form {
  .el-button {
    background-color: #2dbcbe;
  }
}

.btnDom {
  float: right;
  margin-bottom: 10px;
  .el-button:nth-of-type(1) {
    color: #2dbcbe;
    border: #2dbcbe 1px solid;
  }
  .el-button:nth-of-type(2) {
    color: #367ef2;
    border: #367ef2 1px solid;
  }
  .el-button:nth-of-type(3) {
    color: #2dbcbe;
    border: #2dbcbe 1px solid;
  }
  .el-button:nth-of-type(4) {
    color: #2dbcbe;
    border: #2dbcbe 1px solid;
  }
  .el-button:nth-of-type(5) {
    color: #ffb219;
    border: #ffb219 1px solid;
  }
}
.el-form {
  width: 100%;
}
.formBox {
  text-align: center;
}
::v-deep {
  .el-pagination.is-background .el-pager li:not(.disabled) {
    background-color: #fff; // 进行修改未选中背景和字体
    border: 1px solid #cdcdcd;
    // color: #fff;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #2dbcbe; // 进行修改选中项背景和字体
    color: #fff;
  }
  .btn-prev,
  .btn-next {
    background-color: #fff !important;
    border: 1px solid #cdcdcd;
  }
  .btn-prev i,
  .btn-next i {
    color: #000 !important;
  }
}
</style>
